iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

實作小範例入門 Vue & Vuex 2.0系列 第 25

vue & vuex 25 - Login - II (router auth、rouetr beforeEach)

  • 分享至 

  • xImage
  •  

昨天我們做了一個登入頁面,可是使用者還是可以任意轉跳到其他頁面,今天我們要讓其它頁面加上驗證項目,讓登入頁面變成我們的大門。

vue & vuex 25 - Login 驗證

今天目標:

  1. 設定 router 驗證。
  2. 如果 token 不存在,請轉跳到 /login 讓使用者重新登入。

meta

meta 路由表訊息
meta 可以說是路由表中可以自訂設計的開發區域,可以把這邊當作自訂的 config 看待。

自由設計記錄一些參數

requiresAuth 是我們這次記錄 是否需要驗證 自訂的參數。

matched

如何讀取到 meta ?

使用 matched 用來顯示此路由表物件所有訊息。

因此 matched.meta.requiresAuth 就是我們紀錄的 是否需要驗證 參數。

router.beforeEach Hook

在哪邊讀取 meta ?

router.beforeEach Hook 為 vue-router 轉跳之前必會觸發的 function

因此我們可以把頁面轉跳的驗證設計在這邊。

router.beforeEach((to, from, next) => { // some code.. }

帶有 3 個參數:

參數 功能
to 要轉跳的頁面
from 從哪個頁面轉過來
next 執行下一個事件,每個判斷都必須確保使用到 next()

next(false); 將會中斷事件,轉跳到回 from 原始路由頁面
next 的設計有點像 node.js express middleware

因此我們就可以在這邊解析 to.matched.requiresAuth 判斷要轉跳的頁面 是否需要驗證


main.js

const router = new VueRouter({
  // 使用 HTML 5 模式(沒有 hash, ex: #/hello)
  mode: 'history',
  base: __dirname,
  // routre 表
  routes: [
    {
      path: '/hello',
      name: 'hello',
      component: Hello,
      meta: { requiresAuth: true }, // 需驗證
    },
// 中間都要需要設定驗證,略..
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: { requiresAuth: false }, // 不需驗證
    },
    // 當 url path 不符合 router 表的時候,預設轉址到
    // 順序一定要最後面
    { path: '/*', redirect: '/login' }
  ]
});

router.beforeEach((to, from, next) => {
  // 如果 router 轉跳的頁面需要驗證 requiresAuth: true
  console.log('to=', to.fullPath, '| from=', from.fullPath);
  if (to.matched.some(record => {
    console.log(record.name, record.meta.requiresAuth);
    return record.meta.requiresAuth;
  })) {
    // 如果沒有 token 
    console.log('token?', store.state.token);
    if (store.state.token === '') {
      // 轉跳到 login page
      next({ path: '/login' });
    } else {
      next(); // 往下繼續執行
    }
  } else {
    next(); // 往下繼續執行
  }
});

因此這段邏輯主要是檢查要轉跳到的頁面需要驗證,並且 state 裡面沒有 token 的時候。

否則就執行下一步驟,進入路由表。

未登入,或不知名狀況 token 被清空了。


github 完整範例:

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。


上一篇
vue & vuex 24 - Login - I (action Promise、rouetr change)
下一篇
vue & vuex 26 - 使用 SASS 管理 CSS - webpack sass-loader
系列文
實作小範例入門 Vue & Vuex 2.030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言